<template>
	<view>		
		<swiper class="swiper" :autoplay="true">
			<swiper-item v-for="(item, index) in house.img_url">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>			
		</swiper>
		<view class="detail-container">		
			<view class="title">{{house.building_name}}</view>		
			<view class="collection" @click="addCollection">
				<image :src="img_collection" ></image>
				<text :class="{'active':collection_active}">{{collection}}</text>
			</view>
				<view class="detail-item">
					<view class="tab-box">
						<text >销售状态</text>
						<text class="active">{{house.sale_status}}</text>						
					</view>
				</view>		
			<view class="detail-group">
				<view class="detail-item">
					<text class='pre-title'>参考价格</text>
					<text>{{house.reference_average_price}} 元/㎡</text>	
					<text class="pre-title" style="text-align:right">总价</text>
					<text class="key-num">300万</text>
				</view>	
				<view class="detail-item">
					<text class="pre-title">建筑面积</text>
					<text>{{house.building_area}} ㎡</text>
				</view>
				<view class="detail-item">
					<text class="pre-title">住宅类型</text>
					<text>{{house.type_of_residence}}</text>
				</view>
			</view>		
			<view class="divider"></view>
			<view class="detail-group">
				<view class="detail-item">
					<text class="pre-title">开发商</text>
					<text>{{house.developer}}</text>	
				</view>	
				<view class="detail-item">
					<text class="pre-title">楼盘地址</text>
					<text>{{house.building_address}}</text>
				</view>
				<view class="detail-item">
				</view>
					<text class="pre-title">所在地区</text>
					<text >{{house.location}}</text>
				<view class="detail-item">
					<text class="pre-title">分佣比例</text>
					<text class="pre-title">买</text>
					<text class="key-num trade" style="position: absolute;left: 220rpx;">{{saler_ratio}}%</text>
					<text class="pre-title"  style="position: absolute;left: 420rpx;">卖</text>
					<text class="key-num trade" style="position: absolute;left: 456rpx;">{{seller_ratio}}%</text>					
				</view>				
			</view>		
		</view>
		<view class="detail-container">
			<view class="title">户型结构</view>			
			<view class="detail-item">
				<view class="tab-box">
					<text v-for="(item,index) in apartmentLayoutArray" :key="index" :class="item.type == 1 ? 'active' : (item.type == 2 ? 'highlight' : '')">{{item.title}}</text>
				</view>
			</view>		
			<view class="show-container">
				<view class="show-item" v-for="(item, index) in houseShowArray" :key="index" :class="item.type == 2 ? 'pre-title' : (item.type == 3 ? 'key-num' : '')">
					<image :src="item.img_url" mode="widthFix"></image>	
					<text v-for="(_item, index) in item.info" :key="index" :class="_item.type == 2 ? 'pre-title' : (_item.type == 3 ? 'key-num' : '')">{{_item.title}}</text>
				</view>							
			</view>
		</view>
		<view class="detail-container">
			<view class="title">卖方经纪人</view>	
			<view class="img-container">
				<view class="">
					<image src="../../static/u256.svg" mode="aspectFit"></image>
					<view style="display: inline-block;">
						<text>{{house.userInfo.user_name}}</text>
						<text>{{house.userInfo.company}}</text>
						<text>{{house.userInfo.phone}}</text>
					</view>
				</view>
				<view class="">
						<!-- <image src="../../static/phone.png" style="width: 80rpx;height: 80rpx" mode="aspectFit"></image> -->
				</view>				
			</view>
		</view>	
		<view class="detail-container">
			<view class="title">基础信息</view>							
			<view class="detail-group">
				<view class="detail-item">
					<text class="pre-title">类型</text>
					<text >{{house.type_of_residence}}</text>			
					<text class="pre-title">建筑类型</text>
					<text>{{house.type_of_building}}</text>	
				</view>	
				<view class="detail-item">
					<text class="pre-title">装修情况</text>
					<text >{{house.house_renovation_condition}}</text>			
					<text class="pre-title">产权年限</text>
					<text>{{house.term_of_property_right}}年</text>	
				</view>
				<view class="detail-item">
					<text class="pre-title">占地面积</text>
					<text >{{house.area_covered}} ㎡</text>			
					<text class="pre-title">建筑面积</text>
					<text>{{house.building_area}} ㎡</text>	
				</view>
				<view class="detail-item">
					<text class="pre-title">规划户数</text>
					<text >{{house.num_of_plan}}户</text>			
					<text class="pre-title">车位配比</text>
					<text>{{house.park_space_ratio}}</text>	
				</view>
				<view class="detail-item">
					<text class="pre-title">容积率</text>
					<text >{{house.plot_rate}}</text>			
					<text class="pre-title">绿化率</text>
					<text>{{house.green_rate}}%</text>	
				</view>
			</view>	
			<view class="divider-hidden"></view>
			<view class="detail-group">
				<view class="detail-item">
					<text class="pre-title">物业公司</text>
					<text >{{house.property_company}}</text>						
				</view>
				<view class="detail-item">
					<text class="pre-title">物业费用</text>
					<text >{{house.property_cost}} 元/㎡/月</text>			
					<text class="pre-title">供暖方式</text>
					<text>{{house.heat_mode}}</text>	
				</view>
				<view class="detail-item">
					<text class="pre-title">供水供电</text>
					<text >{{house.water_power_supply}}</text>							
				</view>	
			</view>													
		</view>
		<view class="detail-container">
			<view class="title">房源地图</view>	
			<view class="detail-grid">
				<image src="../../static/u251.jpg" mode="widthFix"></image>
			</view>
		</view>	
		<view class="detail-container">
			<view class="title">销售信息</view>							
			<view class="detail-group mg0">
				<view class="detail-item">
					<text class="pre-title">售卖状态</text>
					<text >{{house.sale_status}}</text>			
					<text class="pre-title">售卖楼栋</text>
					<text>{{house.sale_building}}</text>	
				</view>
				<view class="detail-item">
					<text class="pre-title">售卖户型</text>
					<text>2室/3室</text>			
					<text class="pre-title">最新开盘</text>
					<text>{{house.last_open}}</text>	
				</view>
				<view class="detail-item">
					<text class="pre-title">售楼地址</text>
					<text>{{house.sale_building_address}}</text>						
				</view>
				<view class="detail-item">
					<text class="pre-title">预售证</text>
					<text>{{house.pre_sale_permit}}</text>									
				</view>
				<view class="detail-item">
					<text class="pre-title">发证时间</text>
					<text>{{house.issue_time}}</text>									
				</view>
				<view class="detail-item">
					<text class="pre-title">绑定楼栋</text>
					<text>{{house.bind_building}}</text>									
				</view>				
			</view>				
		</view>
	</view>	
</template>

<script>
	import store from '@/store/store.vue'
	export default {		
		onLoad(options){
			console.log(options)
			this.id = options.id
			this.user_id = options.user_id
			this.house_source_id = options.house_source_id
		},
		onShow(){
			let _this = this
			uni.request({
			    url: store.url + '/house/get_house_info_by_new_house?id=' + _this.id + '&user_id=' + _this.user_id + '&house_source_id=' + _this.house_source_id,
				method: 'GET',		
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {						
					console.log(res)
					if(res.data.status == 'success'){												
						let msg = res.data.message
						_this.house = res.data.message
						let arr = msg.commission_share_ratio.split(';')
						_this.saler_ratio = arr[0]
						_this.seller_ratio = arr[1]
						arr = msg.img_url.split(';')
						arr.pop()
						_this.house.img_url = arr
						for(let j = 0; j < arr.length; j++){
							arr[j] = store.url + '/uploads/' + arr[j]
						}
						_this.house.img_url = arr
						if(_this.house.type_of_residence == 1){
							_this.house.type_of_residence = '住宅'
						}else{
							_this.house.type_of_residence = '别墅'
						}
						if(this.house.type_of_building == 1){
							this.house.type_of_building = '板楼'
						}else if(this.house.type_of_building == 2){
							this.house.type_of_building = '塔楼'
						}else{
							this.house.type_of_building = '板塔结合'
						}
						if(_this.house.house_renovation_condition == 1){
							_this.house.house_renovation_condition = '毛坯'
						}else if(_this.house_renovation_condition == 2){
							_this.house.house_renovation_condition = '普通装修'
						}else{
							_this.house.house_renovation_condition = '精装修'
						}
						if(_this.house.heat_mode == 1){
							_this.house.heat_mode = '自供暖'
						}else{
							_this.house.heat_mode = '集中供暖'
						}
						if(_this.house.water_power_supply == 1){
							_this.house.water_power_supply = '民水民电'
						}else{
							_this.house.water_power_supply = '商水商电'
						}
						if(_this.house.sale_status == 1){
							_this.house.sale_status = '在售'
						}else{
							_this.house.sale_status = '未开盘'
						}
						
					}else{
						uni.showModal({
							title: '提示',
							content: '错误: ' + res.data.message
						});								
					}										        
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});	
		},
		data(){
			return {			
				house:{},
				saler_ratio: '',
				seller_ratio: '',
				houseShowArray: [{
					img_url: '../../static/1234567.jpg',
					info: [{
						title: "1室1厅1卫",
						type: 0
					},{
						title: "90.5m2/朝南",
						type: 2
					},{
						title: "290万/套",
						type: 3
					}]				
				},{
					img_url: '../../static/1234567.jpg',
					info: [{
						title: "1室1厅1卫",
						type: 0
					},{
						title: "90.5m2/朝南",
						type: 2
					},{
						title: "290万/套",
						type: 3
					}]				
				}]
			}			
		},
		methods:{
			addCollection(){
				if(getApp().globalData.user_id == 0){
					uni.showModal({
					    title: '提示',
					    content: '请先登录'
					});	
					return
				}
				
				let _this = this					
				uni.request({
				    url: store.url + '/house/add_collection',
					method: 'POST',		
				    header: {
						"content-type": "application/json;charset=utf-8"						
				    },
					data:{
						house_source_id: _this.id,
						user_id: getApp().globalData.user_id,
						house_source_type: 2,
						publisher_id: _this.options.publisher_id,
						inviter_id: _this.options.inviter_id,
						address: _this.house.specific_location,
						house_layout: _this.options.house_layout,
						title: _this.options.title
					},
				    success: (res) => {						
						console.log(res)					
						_this.img_collection = '../../static/collection_after.png'
						_this.collection_active = true
				    },
					fail: (res)=>{
						uni.showModal({
						    title: '提示',
						    content: '访问服务器失败: ' + res.data.message
						});						
					}
				}); 
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.swiper {
		margin: 0 auto 0;
		overflow: hidden;
		width: 100%;
		height: 46vw;
	
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.detail-container{
		margin: 20rpx auto 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		width: 94vw;
		background: #fff;
		
		.title{
			font-size: 40rpx;
			font-weight: bold;
			letter-spacing:5rpx
		}			
				
		.collection{
			position: absolute;
			right: 40rpx;
			top: 24rpx;
			font-size: 22rpx;
			color: #676565;
			image{
				height: 45rpx;
				width: 45rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: -2rpx;
				margin-top: 6rpx;
			}			
			.active{
				color: #f13b32;
			}
		}	
		
		.detail-group{
			margin: 50rpx 0 20rpx 0;
			
			text{
				margin-right: 20rpx;			
				&:first-of-type + text{
					margin-right: 60rpx
				}
			}			
			.text-group{
				width: 50%;
			}
			text.half:first-of-type{
				width:142rpx;
				margin-right:-10rpx!important;
			}					
			
			text.half:first-of-type + text{
				width: 25%;
			}
			
			.trade:first-of-type + text{
				margin-right: 0;
				position: relative;
				left: -300rpx!important;
			}
			
			.trade:first-of-type + text + text + text{
				margin-right: 0;
			}
			.trade{
				position: relative;
				left: -84rpx;
			}
		}			
		
		.detail-item {
			display: flex;
			margin: 10rpx auto;		
			box-sizing: border-box;
			border-radius: 10rpx;
			align-items: center;
			justify-content: flex-start;			
			
			text{
				min-width:120rpx;
				text-align: left;
			}
			text.key-num{
				max-width:40rpx!important;
				text-align: left;
			}
			.tab-box {
				font-size: 20rpx;
				color: #676565;
						
				text {								
					font-weight: bold;
					margin-right: 15rpx;
					box-sizing: border-box;
					padding: 5rpx 10rpx;
					-webkit-border-radius: 8rpx;
					-moz-border-radius: 8rpx;
					border-radius: 5rpx;
					background: #ededed;		
					color: #676565;
				}
			
				.active {
					color: #46aeec;
					background: #d0e2f6;
				}		
									
				.highlight{
					color: #fff;
					background: #f13a32;
				}					
			}
			
			.pre-title{
				color: #676565;				
			}
			
			.key-num{
				color: #f13a32;
			}
						
			.pdmg:first-of-type{
				letter-spacing: 12rpx;		
				margin-right: 10rpx;
			}
			
			.pdmg:first-of-type + text + text{
				letter-spacing: 12rpx;		
				margin-right: 10rpx;
			}
			
			image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		
		// 	> view {
		// 		font-size: 24rpx;
		
		// 		&:first-of-type {
		// 			padding: 0 20rpx;
		// 			box-sizing: border-box;
		// 			flex: 1;
		
		// 			view {
		// 				line-height: 1.5;
		// 				font-size: 34rpx;
		// 				font-weight: bold;
		// 			}
		
		// 			text {
		// 				color: #bdbdbd;
		// 			}
		// 		}
		
		// 		&:last-of-type {
		// 			display: flex;
		
		// 			text {
		// 				line-height: 88rpx;
		// 				color: #00a0e9;
		// 			}
		
		// 			image {
		// 				margin-left: 20rpx;
		// 				width: 18rpx;
		// 				height: 88rpx;
		// 			}
		// 		}
		// 	}
		}
	}
	
	.detail-grid{		
		display: flex;
	
		image {
			margin: 0vw;
			flex: 1;
		}		
	}
	.divider{
		background:#bbb;
		height:1px;
		margin-top:60rpx
	}
	.divider-hidden{
		height:1px;
		margin-top:60rpx
	}
	.detail-group.mg0{
		margin-top: 0;		
	}
	.img-container {
		display: flex;
		margin: 0 auto;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-radius: 10rpx;
		align-items: center;
		justify-content: space-between;
		width: 90vw;
		background: #fff;
	
		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			overflow: hidden;
			background: #02a0ea;
		}
		
		text{
			display: block;
			margin-left: 20rpx;
		}
		
		text:first-of-type{
			font-size: 40rpx;
			font-weight: bold;
		}
		text:last-of-type{
			color: #676565;
		}
	}
	.show-container{
		display: flex;
		margin: 0 auto;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-radius: 10rpx;
		align-items: center;
		justify-content: flex-start;
		width: 90vw;
		background: #fff;
		align-items: flex-start;
		
		.show-item{
			width: 50%;
			margin: 0 20rpx;
			
			image {
				width: 100%;
			}
			
			text{
				display: block;
			}
			
			.pre-title{
				color: #676565;				
			}
			
			.key-num{
				color: #f13a32;
			}
		}
	}
	
	// .house-title {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	font-size: 20rpx;
	// 	color: #676565;
	
	// 	.tab-box {
	// 		// font-size: 20rpx;
	// 		color: #676565;
	// 		background: #ededed;
	// 		text {
	// 			padding
	// 			padding-left: 40rpx;
	// 			box-sizing: border-box;
	// 		}
		
	// 		.active {
	// 			color: #46aeec;
	// 			background: #d0e2f6;
	// 		}
	// 	}
	// }
</style>
